<template>
    <page-container :show="submitData.show" @enter="onEnter" @clickoverlay="submitData.show = false">
        <view class="popups">
            <text class="popups-title">选择成员</text>
            <view class="member-view">
                <image src="/static/other/touxiang.svg" mode="widthFix"></image>
                <text>{{name}}</text>
                <text @click="choosePatient">{{name == '' ? '选择就诊人' : '重新选择'}}</text>
            </view>
            <view class="select-submit" @click="subMit">提交预约</view>
        </view>
    </page-container>
</template>
<script setup lang="ts">
import { reactive, ref } from 'vue'
import { myData } from '@/stroe/index'
import RequestApi from '@/public/request'
export interface Event {
    phy_name: string;
    phy_time: string;
    show: boolean
}
function onEnter() { console.log('进入中触发') };
// 待提交的值
let submitData = reactive({
    phy_name: '',
    phy_time: '',
    show: false,
    patient_id: ''
})

// 被父组件调用的方法
function trigGer(event: Event) {
    submitData.phy_name = event.phy_name
    submitData.phy_time = event.phy_time
    submitData.show = event.show
}
defineExpose({ trigGer })

// 选择就诊人
function choosePatient() {
    uni.navigateTo({
        url: '/pages/patient/index'
    })
}

// 监听选择的就诊人
let name = ref('')
const store = myData()
store.$subscribe((mutayion, state) => {//subscribe=watch
    name.value = state.patient.name
    submitData.patient_id = state.patient._id
})

// 提交预约
async function subMit() {
    uni.showLoading({ title: '提交中', mask: true })
    const res = await RequestApi.ResPhy(submitData) as { statusCode: number }
    if (res.statusCode == 200) {
        uni.hideLoading()
        uni.redirectTo({
            url: "/pages/phyExamorder/index"
        })
    }
}

</script>
  
<style>
/* 选择成员 */
.popups-title {
    font-size: 35rpx;
    text-align: center;
    font-weight: bold;
    display: block;
    padding: 20rpx 0;
}

.member-view {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 20rpx;
}

.member-view image {
    width: 80rpx;
    height: 80rpx;
}

.member-view text:nth-child(2) {
    flex: 1;
    padding: 0 40rpx;
    font-weight: bold;
}

.member-view text:nth-child(3) {
    color: #0176ff;
}

.select-submit {
    background-color: #0176ff;
    color: #ffffff;
    border-radius: 10rpx;
    text-align: center;
    padding: 20rpx 0;
    margin: 50rpx 20rpx 68rpx 20rpx;
}

/* 预约时间段 */
.nucleic-time {
    background-color: #ffffff;
    padding: 20rpx;
    margin: 20rpx;
    border-radius: 20rpx;
}

.nucleic-Title {
    font-weight: bold;
}

.scroll-view_H {
    white-space: nowrap;
    margin-top: 20rpx;
}

.nucleic-time-flex {
    display: flex;
    align-items: center;
}

.nucleic-time-flex view {
    display: flex;
    align-items: center;
    flex-direction: column;
    padding: 10rpx 20rpx;
    margin-right: 20rpx;
    border-radius: 10rpx;
}

.popups {
    height: 400rpx;
    width: 100%;
    background-color: #ffffff;
}
</style>